﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
		<meta name="apple-mobile-web-app-title" content="思路广惠">
		<title>商品详情</title>
		<meta content="telephone=no" name="format-detection" />
		<link href="//cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="../../src/css/base.css?1.0" />
	</head>

	<body class="body-bg">
		<a class="detail-back" href="javascript: history.go(-1)"><i class="iconfont icon-fanhui1 i2m"></i></a>
		<!--<header class="head-outer"> 
        		<a href="javascript: history.back(-1);"><i class="iconfont icon-fanhui1"></i></a> 
    		</header>-->
		<section>
			<!-- Swiper -->
			<div class="swiper-container">
				<div class="swiper-wrapper" id="swiper-wrapper">

				</div>
				<div class="swiper-pagination"></div>
			</div>
			<div class="pad1rem bg-fff">
				<p class="details s12m col3"></p>
				<p class="huef36 s13m pad-ud">￥<span class="details"></span></p>
				<p class="s12m huef36 btm1rem" id="pointHide">返还积分：<span class="details"></span>%</p>

				<div class="flexs-bw">
					<span>快递：<i class="details"></i></span>
					<span>月销 <i class="details"></i> 笔 </span>
					<address>重庆</address>
				</div>
			</div>
			<div class="choosesku top1rem pad1rem flexs-bw bg-fff s13m">
				<p>请选择：<span class="details"> </span></p>
				<i class="iconfont icon-gengduo"></i>
			</div>
			<div class="bg-fff top1rem">
				<div class="pad1rem flexs-al">
					<img style="width: 25%;" src="../../src/images/prd-sp140x140.jpg" />
					<a href="../Home/homestore.html" class="details s12m pad-lr col3"> </a>
				</div>

				<div class="flexs-al pad1rem centre">
					<div class="flex1">
						<span class="col3">1000000</span>
						<p>全部宝贝</p>
					</div>
					<div class="flex1 details-bd">
						<span class="col3">90000</span>
						<p>收藏人数</p>
					</div>
					<div class="flex1">
						<a href="../Home/homestore.html" class="cashCancel">近店逛逛</a>
					</div>
				</div>
				<p class="centre s13m col3 pad1rem">查看详情</p>
			</div>
			<div class="details detail-m btm4rem"> </div>
		</section>
		<div class="bottom-nav">
			<footer class="flexs-al  bg-fff setup-u centre">
				<a href="javascript:void(0);" class="flex1">
					<i class="iconfont icon-weibiaoti1 uplist-span"></i>
					<p class="col3">客服</p>
				</a>
				<a href="javascript:void(0);" class="flex1 details-bd">
					<i class="iconfont icon-dianpu"></i>
					<p class="col3">店铺</p>
				</a>
				<a href="javascript:void(0);" class="flex1">
					<i class="iconfont icon-fill85"></i>
					<p class="col3">收藏</p>
				</a>
				<button type="button" class="flex1 choosesku huefff  wh100" style="background: #FFAB33;">加入购物车</button>
				<button type="button" class="flex1 choosesku huefff  wh100" style="background: #ff3366;">立即购买</button>
			</footer>

		</div>
		<script type="text/html" id="footers">
			<a href="javascript:void(0);" class="flex1">
				<i class="iconfont icon-weibiaoti1 uplist-span"></i>
				<p class="col3">客服</p>
			</a>
			<a href="javascript:void(0);" class="flex1 details-bd">
				<i class="iconfont icon-dianpu"></i>
				<p class="col3">店铺</p>
			</a>
			<a href="javascript:void(0);" class="flex1">
				<i class="iconfont icon-fill85"></i>
				<p class="col3">收藏</p>
			</a>

			<button type="button" class="flex1 huefff  wh100" style="background: #3D9CA7;">立即预约</button>

		</script>
		<script type="text/html" id="banners">
			{{# for(var i = 0; i
			< d.Product_Banner.length; i++){ }} <div class="swiper-slide"><img style="width: 100%;" src={{d.img}}{{d.Product_Banner[i].Banner_Url}} /></div>
				{{# } }}
		</script>
		<script type="text/html" id="modes">
			<div class="details-layer">
				<div class="setup-btm  flexs pad-lr">
					<div style="width: 35%;position: relative;bottom: 1rem; line-height: 0;">
						<img class="w100" src={{d.img}}{{d.Image_Url}} />
					</div>
					<div class="flexs-cs flex1 pad-lr">
						<p class="huef36">
							￥ <span class="carattr"> </span>
						</p>
						<p>
							库存量: <span class="carattr">   </span> {{d.Product_Unit}}
						</p>
						<p>
							已选择： <span class="carattr"> </span>
						</p>
					</div>
					<div> <span class="closes">关闭</span> </div>
				</div>
				<div class="details-lay">
					{{# for(var i = 0; i
					< d.Product_Attr.length; i++){ }} <dl class="pad-lr">
						<dt class="col3 s13m btm1rem" data-type={{i}}>{{d.Product_Attr[i].Attr_Name}}</dt> {{# for(var j = 0; j
						< d.Product_Attr[i].Product_AtrVal.length; j++){ }} <dd class="details-dd" data-type={{d.Product_Attr[i].Product_AtrVal[j].AttrVal_ID}} index={{j}}>{{d.Product_Attr[i].Product_AtrVal[j].AttrVal_Name}}</dd>
							{{# } }}

							</dl>
							{{# } }}
							<div class="flexs-al flexs-bw pad1rem setup-u">
								<h2 class="col3">购买数量</h2>
								<div class="flexs">
									<button class="amount-sub lay-num"> - </button>
									<input type="text" class="amount-num lay-inp" value="1" onkeyup="this.value = this.value.replace(/^0|[^\d]/g, '')" />
									<button class="amount-sup lay-num"> + </button>
								</div>
							</div>
				</div>
				<div class="flexs bottom-nav ">
					<button type="button" id="addcar" class="flex1 huefff pad-ud s12m" style="background: #ffab33;">加入购物车</button>
					<button type="button" id="buynow" class="flex1 huefff pad-ud s12m" style="background: #ff3366;">立即购买</button>
				</div>

			</div>
		</script>
		<script src="http://apps.bdimg.com/libs/laytpl.js/1.1/laytpl.js"></script>
		<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
		<script src="//cdn.bootcss.com/Swiper/3.4.2/js/swiper.min.js"></script>
		<script src="//cdn.bootcss.com/layer/3.0.1/mobile/layer.js"></script>
		<script src="../../src/js/all.js" type="text/javascript" charset="utf-8"></script>
		<script>
			
			var result = {}; // 请求结果
			(function() {
				$("section").hide();
				silks.loaded(true);
				$.get(urls + "/WorkProduct/GetProductInfo", {
					ProductID: silks.getByVal("typeID")
				}, function(res) {
					console.log(res)
					result = res.Return_Data;
					result.img = imgurlmiddle;
					result.cashs = result.Product_MallType == "Point" // 判断是否积分的显示单价格式
						?
						result.Product_Sku[0].Sku_PriceCash + " + 积分 " + result.Product_Sku[0].Sku_PricePoints :
						result.Product_Sku[0].Sku_PriceCash;
					result.carattr = silks.arr_str(result.Product_Attr, "Attr_Name");
					// 循环显示商品
					silks.setAssign([result.Product_Name,
						result.cashs,
						result.Product_GivenScale,
						Number(result.Product_PostAge).toFixed(2),
						result.Product_SaleTotal,
						result.carattr, // 选择规格
						result.Business_Name,
						result.Product_Descript
					], ".details");

					laytpl($("#banners").html()).render(result, function(html) {
						$("#swiper-wrapper").html(html);
					});
					// 底部线下预约显示
					if(result.Product_MallType == "OffLine") {
						$("footer").html($("#footers").html())
					}

					// 返还积分影藏
					if(result.Product_MallType !== "Given") {
						$("#pointHide").hide();
					}

					var errowimg = document.images;
					for(var i = 0; i < errowimg.length; i++) {
						errowimg[i].onerror = function() {
							this.src = "../../src/images/tp.png";
						}
					}
					$("section").show();
 					silks.loaded(false);
				});
			}());
			
			// 弹出类别选择
			$(".choosesku").click(function() {
				
				laytpl($("#modes").html()).render(result, function(html) {
					var pageii = layer.open({
						type: 1,
						content: html,
						anim: 'up',
						style: 'position:fixed; left:0; top:30%; width:100%; height:70%; border: none; -webkit-animation-duration: .5s; animation-duration: .5s;'
					});

					var Product_Sku = result.Product_Sku,
						show_sku = function(nodes) {
							var $carattr = $(".carattr");
							if(result.Product_MallType == "Point") {
								$carattr.eq(0).html(nodes.Sku_PriceCash + " + 积分 " + nodes.Sku_PricePoints)
							} else {
								$carattr.eq(0).html(nodes.Sku_PriceCash)
							}
							$carattr.eq(1).html(nodes.Sku_Stock);
							$carattr.eq(2).html(nodes.Sku_Name);
							$carattr.eq(2).attr("data-id", nodes.Sku_ID);
						};

					// 库存 /价格 /类别显示
					Product_Sku.forEach(function(item, index, arr) {

						if(item.Sku_IsDefault == 1) { // 默认信息判断
							show_sku(item); // 显示对应信息

							var $dd = $("dd");
							var sku = item.Sku_Name.split(" "); // 截取字符串

							for(var i = 0; i < $dd.length; i++) { // 对应信息标记
								for(var j = 0; j < sku.length; j++) {
									if($dd[i].innerText == sku[j]) {
										$dd.eq(i).addClass("de-flag");
									}
								}
							}

						}
					})

					// 类别选中
					$("dd").click(function() {
						$(this).addClass("de-flag").siblings("dd").removeClass("de-flag");
						var $this = $(this),
							$attr = $this.attr("data-type"),
							$flag = document.querySelectorAll(".de-flag");
						
						Product_Sku.forEach(function(item, index, arr) {
							var n = 0;
							$flag.forEach(function (it, index, arr) {
								var txreg = new RegExp(it.getAttribute("data-type"));
								if(txreg.test(item.Sku_BaseAttrStr)){
									n++;
								}
								if(n == arr.length){
									show_sku(item);
								}
							})
							 
						})

					})

					// 关闭弹出层
					$(".closes").click(function() {
						layer.close(pageii)
					})
					silks.goodsNum(); // 商品数量加减
				});

			});

					
			
			// 加入购物车
			function addcar() {
				var  $carattr = $(".carattr").eq(2).attr("data-id"),
					 $amount  = $("input.amount-num").val();
				if(!$carattr) {
				 	layers("请选择相应信息1");

				} else if($amount< 1) {
					layers("请输入正确数字");

				} else {
					var data = {
						ProductID: silks.getByVal("typeID"),
						ProductSukID: $carattr,
						Amount: $amount,
						MembersID: MembersID,
						AppID: AppID,
						Token: Token
					};
					$.post(urls + "/WorkCar/JoinCar", data, function(res) {
						layers(res.Return_Mess);
						
					});
					if(this.id == "buynow") {
						window.location.replace("orderIndex.html");
					}
				}

			}
			$(document).on("click", "button#addcar", addcar);

			// 立即购买
			$(document).on("click", "#buynow", addcar);
		</script>
		<script>
			var mySwiper = new Swiper('.swiper-container', {
				pagination: '.swiper-pagination',
				autoplay: 3000,
				observer: true,
				observeParents: true,
			});
			mySwiper.update(true);
		</script>
	</body>

</html>